<template>
  <div>
  <div style="border:1px solid ;width: 300px;">
    老师说: <br>
    今天考试客户端 <br>
    <p v-for="t in talkList">{{t}}</p>
    <a href="javascript:void(0)" @click="add()">回复</a><br>
    <div v-if="talkVisible" style="height: 100px; border: 1px solid">
      <textarea v-model="content"></textarea>
      <input type="button" value="评论" @click="addTalk()">
    </div>
  </div>
    <br>

    <div>

      <select v-model="proId" @change="showCity()">
        <option v-for="pro in provinceList" :key="pro.id" :value="pro.id">{{pro.name}}</option>
      </select>

      <select>
        <option v-for="c in city" :key="c.id">{{c.name}}</option>
      </select>

    </div>

  </div>
</template>

<script>
export default {
  data() {
    return {
      proId:1,
      talkList:[],
      talkVisible:false,
      content:"",
      cityList:[
        {id:1,name:"成都",province:1},
        {id:2,name:"广安",province:1},
        {id:3,name:"绵阳",province:1},
        {id:4,name:"台北",province:2},
        {id:5,name:"台南",province:2},
        {id:6,name:"高雄",province:2},
        {id:7,name:"广州",province:3},
        {id:8,name:"深圳",province:3},
        {id:9,name:"珠海",province:3}
      ],
      provinceList:[
        {id:1,name:"四川省"},
        {id:2,name:"台湾省"},
        {id:3,name:"广东省"}
      ],
      city:[]

    }
  }, methods: {
    add(){
      this.talkVisible=true;
    },
    addTalk(){
      this.talkList.push(this.content);
      this.talkVisible=false;
      this.content="";
    },
    showCity(){
      this.city=this.cityList.filter(c=>c.province==this.proId)
    }
  }
}
</script>

<style scoped>

</style>